<template>
    <div class="h100 box-sizing">
        <e-table
            ref="eTableRef" class="w100"
            pageName="systemUserPage" maxHeight="calc(100vh - 360px)"
            :requestApi="systemMemberListApi" :columns="columns">
            <template #header-left="{ ids, list, isSelected }">
                <div class="page-header d-flex ai-center">
                    <e-popover ref="addPopover" @show="show" @handleSure="handleActionUser('add', 'addPopover')">
                        <template #button>
                            <div class="text-center cur-pointer">
                                <ft-icon name="el-icon Plus" size="24" color="#E0641C"></ft-icon>
                                <div>添加</div>
                            </div>
                        </template>
                        <template #content>
                            <modify ref="modifyRef"/>
                        </template>
                    </e-popover>
                    <e-popover ref="editPopover" :disabled="list.length != 1" @show="editShow(list)" @handleSure="handleActionUser('edit', 'editPopover')">
                        <template #button>
                            <div class="ml-50 text-center cur-pointer" @click="list.length > 1 || list.length == 0 ? proxy.$modal.msgError('只能选择一条数据编辑') : ''">
                                <ft-icon name="el-icon EditPen" size="24" color="#E0641C"></ft-icon>
                                <div>修改</div>
                            </div>
                        </template>
                        <template #content>
                            <modify ref="modifyRef"/>
                        </template>
                    </e-popover>
                    <div class="ml-50 text-center cur-pointer" @click="handleDelList(ids)">
                        <ft-icon name="el-icon CloseBold" size="24" color="#E0641C"></ft-icon>
                        <div>删除</div>
                    </div>
                </div>
            </template>
            <template #level="{ row }">
                <span v-if="row.level === 1">{{ levelOptions[row.level] }}</span>
                <img v-else :src="levelOptions[row.level]" alt="" class="w-55 h-17">
            </template>
            <template #equity="{row}">
                <span v-if="row.equity.length > 0">{{ filterEquity(row.equity) }}</span>
                <span v-else>无权限</span>
            </template>
        </e-table>
    </div>
</template>
<script setup>
import { systemMemberListApi, systemAddMemberApi, systemEditMemberApi, systemDelMemberApi } from "@/api/modules/system";
import { useHandleData } from "@/hooks/useHandleData";
import modify from "./components/modify.vue";

const eTableRef = ref(null);
const modifyRef = ref(null);
const { proxy } = getCurrentInstance();
// 点击新增打开弹窗时的事件
const show = () => {
    modifyRef.value.reset('add');
    modifyRef.value.resetForm();
}
// 点击修改打开弹窗时的事件
const editShow = (list) => {
    if (list.length > 1) {
        return proxy.$modal.msgError('只能选择一条数据编辑');
    }
    modifyRef.value.reset('edit', list[0]);
}
// 新增 与 修改
const handleActionUser = async(type, popRef) => {
    try {
        const validate =await modifyRef.value.validate();
        if (validate) {
            const api = type === 'edit'? systemEditMemberApi : systemAddMemberApi;
            const res = await api(modifyRef.value.getFormData());
            proxy.$modal.msgSuccess(res.message);
            proxy.$refs[popRef].close();
        } else {
            proxy.$refs[popRef].closeLoading();
        }
    } finally {
        eTableRef.value.refresh();
    }
}
const columns = [
    {
        type: "selection"
    },
    {
        type: "index",
        label: "编号",
        width: 80
    },
    {
        label: "会员名称",
        prop: "vipName"
    }, {
        label: "会员级别",
        prop: "level"
    }, {
        label: "R值折扣",
        prop: "rValue"
    }, {
        label: "E值下限",
        prop: "eLowerValue"
    }, {
        label: "E值上限",
        prop: "eUpperValue"
    }, {
        label: "会员权益",
        prop: "equity"
    }
]
// 级别
const levelOptions = {
    1: '普通会员', 2: "/src/assets/img/vip/vip1.png", 3: '/src/assets/img/vip/vip2.png', 4: '/src/assets/img/vip/vip3.png',
    5: '/src/assets/img/vip/vip4.png', 6: '/src/assets/img/vip/vip5.png',
}
// 会员权益
const equityOptions = {
    1: '蜂潮联盟', 2: '米豆专享', 3: '兑换R值', 4: '生日礼盒', 5: '端午福利', 6: '米豆兑现', 7: '米豆红包',
    8: '春节福利', 9: '即刻行站免费充电2小时', 10: 'APP补签卡', 11: '大型活动报名', 12: '连签365天', 13: '连签730天', 14: '精致洗车服务'
}
const filterEquity = (equity) => {
    return equity.map(item => equityOptions[item]).join('、');
}
// 删除
const handleDelList = async(ids) => {
    if (ids.length === 0) {
        return proxy.$modal.msgError('请选择要删除的数据');
    }
    try {
        await useHandleData(systemDelMemberApi, ids, "删除后无法恢复，请慎重考虑");
    } finally {
        eTableRef.value.refresh();
    }
}
</script>

<style lang="scss" scoped>

</style>